import Quill from "./QuilljsWrapper2"
import "quill/dist/quill.snow.css"
import {useCallback, useEffect, useState} from "react";
import indent from "quill/formats/indent";

const TOOLBAR_OPTIONS = [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    [{ font: [] }],
    [{ list: "ordered" }, { list: "bullet" }],
    ["bold", "italic", "underline"],
    [indent],
    [{ color: [] }, { background: [] }],
    [{ script: "sub" }, { script: "super" }],
    [{ align: [] }],
    ["image", "blockquote", "code-block"],
    ["clean"],
]


function App() {
    const [quill, setQuill] = useState();

    const wrapperRef = useCallback(wrapper => {
        if (wrapper == null) return

        wrapper.innerHTML = ""
        const editor = document.createElement("div")
        wrapper.append(editor)
        const q = new Quill(editor, {
            theme: "snow",
            modules: { toolbar: TOOLBAR_OPTIONS },
        })
        q.setText("加载...")
        setQuill(q)
    }, [])


    useEffect(() => {
        if (null == quill) return

        quill.keyboard.addBinding({
            key: 9,
            handler: (range, context) => {
                console.log('Space handler...', range, context)
                // quill.setSelection(range.index)
                quill.insertEmbed(range.index, 'SpaceBarBlot', '');
                // quill.insertText('\t')
                quill.setSelection(range.index + 1)
                return false
            }
        });

        quill.keyboard.addBinding({
            key: 32,
            handler: (range, context) => {
                console.log('Space handler...', range, context)
                // quill.setSelection(range.index)
                quill.insertEmbed(range.index, 'SpaceBarBlot', '');
                // quill.insertText('\t')
                quill.setSelection(range.index + 1)
                return false
            }
        })
    }, [quill])

    return <div className="container" ref={wrapperRef}></div>
}

export default App;
